<template>
  <div class="md-dict-select-business">
    <el-select v-model="val" :placeholder="placeholder" :multiple="multiple" style="width: 100%" :clearable="clearable" @change="handleChange">
      <el-option v-for="item in list" :key="item[props.value]" :value="item[props.value]" :label="item[props.label]" />
    </el-select>
  </div>
</template>

<script>
import { handleConvertToString } from '@/ddd/util.service.js'
export default {
  name: 'MdDictSelectBusinessComponent',
  props: {
    value: [String, Number, Array],
    /**
     * 缺省提示
     */
    placeholder: {
      type: String,
      default: '请选择'
    },
    /**
     * 自定义选项 value,label
     */
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 是否多选
     */
    multiple: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示清除图标
     */
    clearable: {
      type: Boolean,
      default: true
    },
    /**
     * 配置选项
     */
    props: {
      type: Object,
      default: () => {
        return { label: 'dictLabel', value: 'dictValue' }
      }
    }
  },
  data () {
    return {
      val: handleConvertToString(this.value),
      list: []
    }
  },
  watch: {
    value: {
      handler (val) {
        this.val = handleConvertToString(val)
      },
      deep: true,
      immediate: true
    },
    options: {
      handler (val) {
        this.list = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.val = handleConvertToString(this.value)
    this.list = this.options
  },
  methods: {
    /** 改变事件 */
    handleChange (event) {
      this.$emit('input', event)
      this.$emit('change', event)
    }
  }
}
</script>